<template>
  <div class="app-top">
    <div class="w-100 bf-gg" style="height:100%" />
    <div class="position-absolute h-100" style="top:0">
      <div class="h-100 app-top-top">
        <div style="height: 65.45%;top:6%" class="position-absolute w-100 flex flex-center">
          <!-- <div class="top-one">杨凌农业产业大数据</div> -->
          <div class="top-center top-one">
            陇县奶山羊大数据平台建设框架
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%">
      <span>敬请期待，正在建设中...</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mRouter from '@/router/modules/m-router'
import xRouter from '@/router/modules/x-router'
const arr = ['industrial-evelopment', 'industrial-decision-making', 'industrial-base', 'general-overview']
export default {
  name: 'IndexHeader',
  data() {
    return {
      children: [],
      routerName: '',
      dialogVisible: false
    }
  },
  computed: {
    routerPoor() {
      return [...mRouter, ...xRouter]
    },
    routerParent() {
      return this.$route.query.name ? { one: this.$route.query.name.split(',')[0], two: this.$route.query.name.split(',')[1] } : undefined
    }
  },
  created() {
    this.init(this.$route.name, this.$route.query.name ? this.$route.query.name.split(',')[0] : undefined)
  },
  methods: {
    init(name, query) {
      const routerPoor = this.routerPoor
      if (query) {
        this.children = routerPoor.find((item) => item.name === query).children
        routerPoor.find((item) => {
          return item.name === query
        })
        return
      }
      if (name === this.routerName) return
      if (name === 'general-overview') {
        this.children = []
        return
      }
      if (this.children.length === 0 || !this.children.some((item) => item.name === name)) {
        let findName = ''
        if (arr.includes(name)) {
          findName = name
        } else {
          findName = this.$route.matched[0].name
        }
        this.children = routerPoor.find((item) => item.name === findName).children
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-top {
  position: relative;
  width: 100%;
  height: 10.2%;
}
.bf-gg {
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.app-top-top {
  background: url(~@/assets/img/lxdp/topBanner.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.c-28C2FF {
  color: #28c2ff !important;
}
.itembox {
  margin: 0 auto;
  width: 42.9%;
  height: 100%;
  background: url(~@/assets/img/top-img/children-bg.png) no-repeat;
  background-size: 100% 100%;
  align-items: center;
  padding: 0 8%;
}
.top-one {
  margin: auto;
  font-family: myfont;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(104, 202, 255, 1) 100%);
  color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
  line-height: 50px;
}
.top-center {
  height: 100%;
  width: 31.7%;
//   background: url(~@/assets/img/top-img/top-center.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  padding: 0.55% 0 0;
//   div {
//     font-size: 22px;
//     font-family: myfont;
//     color: rgba(238, 249, 255, 1);
//     line-height: 29px;
//     text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
//     cursor: pointer;
//   }
}
.font-active {
  color: #3cb5ff;
}
.flex-center {
  justify-content: center;
}
.itembox-center {
  width: 100%;
  position: absolute;
  left: 0;
  top: 76%;
  margin: auto;
  z-index: 999;
}
</style>
